{extend name="default/template/base_index" /}


{block name="area_header"}

<script type="text/javascript" src="__CDN__/jquery-validation/1.13.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="__CDN__/jquery-validation/1.13.1/localization/messages_zh.min.js"></script>

<style type="text/css">
    input.error {
        border: 1px solid red;
    }

    label.checked {

        padding-left: 25px;
    }

    label.error {
        padding-left: 25px;
        padding-bottom: 2px;
        font-weight: bold;
        color: #EA5200;
    }
</style>

{/block}

{block name="area_body"}
{include file="default/Widget/topbar" /}
<div class="admin-main container-fluid">
    {include file="default/Widget/left" /}
    <div class="admin-main-content">
        {include file="default/Widget/breadcrumb" /}
        <!-- 带验证 form -->
        <form id="registerForm" class="form-horizontal well validateForm">
            <fieldset>
                <legend>
                    新增用户</legend>
                <!--<div class="form-group">-->
                <!--<label for="inputusername" class="col-md-2 col-lg-2 control-label">国家代码默认</label>-->
                <!--<div class="col-md-10 col-lg-10">-->
                <!--<input type="text" class="required form-control input-short" name="country" value="+86" id="inputusername" placeholder="{:L('PLACEHOLDER_TITLE')}">-->
                <!--<div class="help-block">(国家代码默认+86)</div>-->
                <!--</div>-->
                <!--</div>-->
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label">昵称</label>
                    <div class="col-md-10 col-lg-10">
                        <input type="text" class="required form-control input-short" name="nickname"  placeholder="请输入昵称">
                        <div class="help-block">(昵称)</div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-lg-2 control-label">用户名</label>
                    <div class="col-md-10 col-lg-10">
                        <input type="text" class="required form-control input-short" name="name"  placeholder="请输入昵称">
                        <div class="help-block">(用户名)</div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputusername" class="col-md-2 col-lg-2 control-label">手机号</label>
                    <div class="col-md-10 col-lg-10">
                        <input type="text" class="required form-control input-short" name="username" id="username" placeholder="{:L('PLACEHOLDER_TITLE')}">
                        <div class="help-block">(目前必须是手机号)</div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputpassword" class="col-md-2 col-lg-2 control-label">密码</label>
                    <div class="col-md-10 col-lg-10">
                        <input type="password" class="required form-control input-short" name="password" id="password">
                        <div class="help-block">(用户密码不能少于6位)</div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputrepassword" class="col-md-2 col-lg-2 control-label">确认密码</label>
                    <div class="col-md-10 col-lg-10">
                        <input type="password" class="required form-control input-short" name="repassword" id="inputrepassword">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputrepassword" class="col-md-2 col-lg-2 control-label">是否为代理总部</label>
                    <div class="col-md-10 col-lg-10">
                        <select name="is_agent">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </div>


                <div class="form-group">
                    <label for="btns" class="col-md-2 col-lg-2 control-label">&nbsp;</label>
                    <div class="col-lg-10 col-md-10">
                        <a target-form="validateForm" class="ajax-post btn btn-primary" href="{:url(''.CONTROLLER_NAME.'/new_admin')}" autofocus="autofocus"><i class="fa fa-save"></i> {:L('BTN_SAVE')}</a>
                        <a class="btn btn-default" href="{:url(''.CONTROLLER_NAME.'/index')}"><i class="fa fa-times-circle"></i> {:L('BTN_CANCEL')}</a>
                    </div>
                </div>
            </fieldset>
        </form>
        <!-- form -->
    </div>
    <!-- END admin-main-content -->
</div>
<!-- END admin-main-->
{/block}

{block name="area_footer"}

<script type="text/javascript">
    $(function() {

        //是否中文名字
        $.validator.addMethod("isCnName", function(value, element) {
            var tel = /[a-z0-9.*?,(!)&amp;%$^……！·￥——（）　#@]/g;
            return this.optional(element) || !(tel.test(value));
        }, "请填写正确的姓名");
        // 联系电话(手机/电话皆可)验证
        $.validator.addMethod("isPhone", function(value, element) {
            var length = value.length;
            var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
            var tel = /^\d{3,4}-?\d{7,9}$/;
            return this.optional(element) || (tel.test(value) || mobile.test(value));
        }, "请正确填写您的联系电话");
        // 身份证号码验证
        $.validator.addMethod("isIdCardNo", function(value, element) {
            return this.optional(element) || IdCardValidate(value);
        }, "请正确输入您的身份证号码");
        $("#registerForm").validate({
            errorPlacement: function(error, element) {
                $(".checked", element.parent()).remove();
                error.appendTo(element.parent());
            },
            success: function(label) {
                label.removeClass("error").addClass("checked").text("Ok!");
            },
            rules: {
                username: {
                    required: true,
                    minlength: 4,
                    maxlength: 20,
                    remote: {
                        url: "{:url('Member/check_username')}"
                    }
                },
                realname: {
                    required: true,
                    isCnName: true,
                },
                email: {
                    required: true,
                    email: true,
                    remote: "{:url('Member/check_email')}"
                },
                mobile: {
                    required: true,
                    isPhone: true,
                },
                password: {
                    required: true,
                    minlength: 6,
                    maxlength: 30,
                },
                repassword: {
                    required: true,
                    minlength: 6,
                    maxlength: 30,
                    equalTo: "#password"
                }
            },
            messages: {
                username: {
                    remote: "登录名被占用，请换一个账号",
                    required: "请输入登录账号",
                    minlength: $.validator.format("账号不能小于{0}个字符"),
                    maxlength: $.validator.format("账号不能超过{0}个字符"),
                },
                email: {
                    required: "请输入Email地址",
                    remote: "邮箱被占用，请换一个邮箱",
                    email: "请输入正确的email地址"
                },
                password: {
                    required: "请输入密码",
                    minlength: $.validator.format("密码不能小于{0}个字符")
                },
                repassword: {
                    required: "请输入确认密码",
                    minlength: "确认密码不能小于6个字符",
                    equalTo: "两次输入密码不一致"
                }
            }
        }); //end validate
    }); //end ready
</script>

{/block}